<template>
  <div id="mapp">
    <div class="timeOver">刷新倒计时：{{ time }}秒</div>
    <div
      v-loading="loading"
      :style="{'top':positionY+'px','left':positionX+'px'}"
      class="texter"
      v-if="texterShow"
    >
      <div class="cezhan">
        <div class="itemul">
          <div class="title">
            <el-row>
              <el-col :span="15">
                <i class="title_name">{{device.stationName}}</i>
              </el-col>
              <el-col :span="9"></el-col>
            </el-row>
          </div>
          <div class="title">
            <el-row>
              <el-col :span="15">
                <i>警戒水位:</i>
              </el-col>
              <el-col :span="9">
                <span style="color:red">
                  {{device.warningWater}}
                  <i style="color:#000">cm</i>
                </span>
              </el-col>
            </el-row>
          </div>
          <!-- <div class="title">
            <el-row>
              <el-col :span="15">
                <i>警戒电压:</i>
              </el-col>
              <el-col :span="9">
                <span style="color:red">
                  {{device.resultWarningVoltage}}
                  <i style="color:#000">v</i>
                </span>
              </el-col>
            </el-row>
          </div>-->
          <div class="title">
            <el-row>
              <el-col :span="15">
                <i>设备状态:</i>
              </el-col>
              <el-col :span="9">
                <span
                  :class="device.waterOnlineStatus==1?'green':'red'"
                >{{device.waterOnlineStatus==1?'正常':'异常'}}</span>
              </el-col>
              <!-- <el-col :span="9">
                <span style="color:green">{{device.onlineStatus=="0"?'在线':'离线'}}</span>
              </el-col>-->
            </el-row>
          </div>
          <div class="title">
            <el-row>
              <el-col :span="15">
                <i>在线状态:</i>
              </el-col>
              <el-col :span="9">
                <span
                  :class="device.waterOnlineStatus==1?'green':'red'"
                >{{device.waterOnlineStatus==1?'在线':'离线'}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="title">
            <el-row>
              <el-col :span="15">
                <i>水位告警状态:</i>
              </el-col>
              <el-col :span="9">
                <span
                  :class="device.waterWarningStatus==1?'green':'red'"
                >{{device.waterWarningStatus=="1"?'正常':'告警'}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="title">
            <el-row>
              <el-col :span="15">
                <i>电压告警状态:</i>
              </el-col>
              <el-col :span="9">
                <span
                  :class="device.waterWarningStatus==1?'green':'red'"
                >{{device.waterWarningStatus=="1"?'正常':'告警'}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="TR"></div>
      <div class="LB"></div>
      <div class="texterTop" v-if="typeid==1?true:false">
        <div class="title">
          <el-row>
            <el-col :span="9">
              <i class="title_name">太阳能信息</i>
            </el-col>
            <el-col :span="15"></el-col>
          </el-row>
        </div>

        <div class="title" v-if="type==1?true:false">
          <el-row>
            <el-col :span="9">
              <i>光伏电压：</i>
            </el-col>
            <el-col :span="15">
              <span>{{device.solarVoltage ==null?0:device.solarVoltage/100}}(V)</span>
            </el-col>
          </el-row>
        </div>
        <div class="title" v-if="type==1?true:false">
          <el-row>
            <el-col :span="9">
              <i>光伏电流：</i>
            </el-col>
            <el-col :span="15">
              <span>{{device.solarElectric ==null?0:device.solarElectric/100}}(A)</span>
            </el-col>
          </el-row>
        </div>
        <div class="title" v-if="type==1?true:false">
          <el-row>
            <el-col :span="9">
              <i>电池温度：</i>
            </el-col>
            <el-col :span="15">
              <span>{{device.batteryTemperature ==null?0:device.batteryTemperature/100}}(℃)</span>
            </el-col>
          </el-row>
        </div>
        <div class="title">
          <el-row>
            <el-col :span="9">
              <i>电池电压：</i>
            </el-col>
            <el-col :span="15">
              <span>{{device.batteryVoltage ==null?0:device.batteryVoltage}}(V)</span>
            </el-col>
          </el-row>
        </div>
        <div class="title" v-if="type==1?true:false">
          <el-row>
            <el-col :span="9">
              <i>负载电流：</i>
            </el-col>
            <el-col :span="15">
              <span>{{device.solarCurrent ==null?0:device.solarCurrent/100}}(A)</span>
            </el-col>
          </el-row>
        </div>
        <div class="title">
          <el-row>
            <el-col :span="9">
              <i>剩余电量：</i>
            </el-col>
            <el-col :span="15">
              <span>{{device.batteryPower ==null?0:device.batteryPower}}(%)</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="tk_btn" @click="getWeatherInfo">
      <div id="he-plugin-simple"></div>
      <!-- <div class="tK_wendu">
        <span class="tk_title">当前温度</span>
        <span>22 ℃</span>
      </div>
      <div class="tk_jiance">
        <span class="tk_title">天气监测</span>
        <span>多云</span>
      </div>-->
      <!-- <iframe
        scrolling="no"
        src="https://tianqiapi.com/api.php?style=te&skin=pitaya&city=东营"
        frameborder="0"
        width="150"
        height="20"
        allowtransparency="true"
      ></iframe>-->
      <!-- <iframe
        scrolling="no"
        src="https://tianqiapi.com/api.php?style=tf&skin=sogou"
        frameborder="0"
        width="250"
        height="50"
        fontsize="10px"
        allowtransparency="true"
      ></iframe>-->
      <div class="temperature"></div>
    </div>

    <i
      v-show="weatherShow"
      class="el-icon-close closeIcon iicon"
      @click="weatherShow=false"
      style="font-weight:700;font-size:14px;"
    ></i>
    <div class="show_info" v-show="weatherShow">
      <div class="up_to">
        <div class="up_box">
          <div class="rr">
            <div class="rr_top"></div>
            <!-- <img src="./../../assets/png/yun.png" alt width="100%" height="100%" /> -->
            <iframe
              class="rr_iframe"
              scrolling="no"
              src="https://tianqiapi.com/api.php?style=ya&skin=sogou&city=东营&paddingtop=80"
              frameborder="0"
              width="100%"
              height="100%"
              allowtransparency="true"
            ></iframe>
            <div class="rr_bot">
              <!-- <div class="rr_bot_item">
                <span class="feng_left">风向风速：</span>
                <span class="feng_right">东北风2级</span>
              </div>
              <div class="rr_bot_item">
                <span class="feng_left">相对湿度：</span>
                <span class="feng_right">62°</span>
              </div>
              <div class="rr_bot_item">
                <span class="feng_left">空气质量：</span>
                <span class="feng_right">良好</span>
              </div>-->
            </div>
          </div>
          <div class="ll_echart">
            <div class="chart_content">
              <div id="ehart1" ref="ehart1" :style="{width: '800px', height: '130px'}"></div>
            </div>
            <div class="chart_content">
              <div id="ehart2" ref="ehart2" :style="{width: '800px', height: '130px'}"></div>
            </div>
            <div class="chart_content">
              <div id="ehart3" ref="ehart3" :style="{width: '800px', height: '130px'}"></div>
            </div>

            <!-- <img src="../../assets/png/rainlist.png" alt width="100%" height="100%"> -->
          </div>
        </div>
        <div class="down_box">
          <div class="ditu">
            <!-- <baidu-map
              id="all_map"
              :center="region"
              :zoom="13"
              :scroll-wheel-zoom="true"
              :dragging="true"
              @ready="handler"
            ></baidu-map>-->

            <img
              src="https://api.heweather.net/s6/map/cloudmap?key=583cc42cd751478f90555e0e2f8bc2f9"
              alt
              width="100%"
              height="100%"
            >
          </div>
          <div class="shitianqi">
            <iframe
              scrolling="no"
              src="https://tianqiapi.com/api.php?style=ts&skin=sogou&city=东营&paddingtop=15"
              frameborder="0"
              width="100%"
              height="100%"
              allowtransparency="true"
            ></iframe>
            <!-- <img src="./../../assets/png/raniner.png" alt width="100%" height="100%" /> -->
          </div>
          <!-- {{weatherAlarm}} -->
          <div class="yujing">
            <div class="yujing_title">预警信息</div>
            <div class="yujing_info">当前地区暂无自然灾害或天气预警</div>
          </div>
          <!-- <div class="yujing">暂无数据</div> -->

          <div class="kqzl">
            <div class="text">东营市平均空气质量（AQI)当前：{{weatherInfo.wtAqi}}</div>
            <div class="kq_status">
              <div class="you">
                <span>0</span>
                优
              </div>
              <div class="liang">
                <span>50</span>良
              </div>
              <div class="qidu">
                <span>100</span>轻度污染
              </div>
              <div class="zhongdu">
                <span>150</span>中度污染
              </div>
              <div class="zhongdu2">
                <span>200</span>重度污染
              </div>
              <div class="yanzhong">
                <span>300</span>严重污染
              </div>
            </div>
            <div class="point" :style="{'left':weatherInfo.wtAqi/3+20+'px'}">
              <img src="./../../assets/png/point.png" alt width="20px" height="50px">
            </div>
            <!-- <div v-if="0<weatherInfo.wtAqi<=50?true:false" class="biaoshi1"></div>
            <div v-else-if="50<weatherInfo.wtAqi<=100?true:false" class="biaoshi2"></div>
            <div v-else-if="100<weatherInfo.wtAqi<=150?true:false" class="biaoshi3"></div>
            <div v-else-if="150<weatherInfo.wtAqi<=200?true:false" class="biaoshi4"></div>
            <div v-else-if="200<weatherInfo.wtAqi<=300?true:false" class="biaoshi5"></div>
            <div v-else class="biaoshi6"></div>-->
          </div>
        </div>
      </div>
    </div>
    <!-- tab切换 -->
    <div class="tabs_check" v-if="typeid==1?true:false">
      <div class="tabs_box">
        <div
          class="items_tab"
          :class="currentIcon==1?'active_current':''"
          @click="getWaterIcons(1)"
        >水位站</div>
        <div
          class="items_tab"
          :class="currentIcon==4?'active_current':''"
          @click="getWaterIcons(4)"
        >积水点</div>
        <div
          class="items_tab"
          :class="currentIcon==0?'active_current':''"
          @click="getWaterIcons(0)"
        >全部</div>
      </div>
    </div>
    <!--  -->
    <div class="status">
      <div class="listone" v-if="typeid==1?true:false">
        水位站：
        <span class="water_icon">
          <img src="../../assets/png/shuiwei.png" alt>
        </span>
      </div>
      <div class="listone" v-if="typeid==1?true:false">
        积水点：
        <span class="level_icon">
          <img src="../../assets/png/jishui.png" alt>
        </span>
      </div>
      <div class="topText">设备状态</div>
      <div class="listone">
        正常
        <span class="blue"></span>
      </div>
      <div class="listtown">
        预警
        <span class="violet"></span>
      </div>
      <div class="listthree">
        故障
        <span class="red"></span>
      </div>
    </div>
    <!-- 报警记录 -->
    <div class="bottomright-B" v-if="typeid==1?true:false">
      <div class="gaojin_title">报警记录:</div>
      <div class="gaojin_content">
        <div class="bottomright-B-main clearfix" v-for="(item,index) in recordList" :key="index">
          <div class="B-main">{{item.state}}</div>
          <div class="B-main">{{item.gatename}}</div>
          <div class="B-main">{{item.rname}}</div>
          <div class="B-main B-main1 el1">{{item.tel}}</div>
        </div>
      </div>
    </div>
    <baidu-map id="all_map" :center="region" :zoom="13" :scroll-wheel-zoom="true" :dragging="true">
      <bm-map-type :map-types="types" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
      <bm-boundary
        :name="region"
        :strokeWeight="2"
        strokeColor="#44AA95"
        :strokeOpacity="1"
        strokeStyle="dashed"
        fillColor="#DCE9E4"
        :fillOpacity="0.6"
      ></bm-boundary>

      <!-- ........... 正常" -->
      <div>
        <div v-for="(item,index) in normalList" :key="index">
          <bm-marker
            :position="{lng:item.address[0],lat:item.address[1]}"
            :icon="{url: item.deviceType==4?'http://47.110.160.217:10071/img/jishuidian1.png':'http://47.110.160.217:10071/img/shuiwei1.png', size: {width: 160, height: 50}}"
            @mouseover="monitorDetails($event,item)"
            :zIndex="66"
            @mouseout="monitor()"
            @click="clickVideo(item)"
          >
            <bm-label
              :content="item.deviceType==4?'':item.stationName+' '+ (item.waterLevel==null?'&nbsp&nbsp&nbsp&nbsp':item.waterLevel) +'cm'"
              :labelStyle="labelStyle1"
              :zIndex="99"
              :offset="{width: 35, height: 5}"
            />
            <!-- <bm-label
            :content="'站点水位：'+item.rainLastRainfall+'cm'"
            :labelStyle="labelStyle1"
            :offset="{width: 45, height: 21}"
            />-->
          </bm-marker>
        </div>
      </div>

      <!-- 预警 -->
      <div>
        <div v-for="(item,index) in rainList" :key="index">
          <bm-marker
            :position="{lng:item.address[0],lat:item.address[1]}"
            :icon="{url: item.deviceType==4?'http://47.110.160.217:10071/img/jishuidian2.png':'http://47.110.160.217:10071/img/shuiwei2.png', size: {width: 160, height: 50}}"
            :zIndex="66"
            @mouseover="monitorDetails($event,item)"
            @mouseout="monitor()"
            @click="clickVideo(item)"
          >
            <bm-label
              :content="item.stationName+' '+ (item.waterLevel==null?'&nbsp&nbsp&nbsp&nbsp':item.waterLevel) +'cm'"
              :labelStyle="labelStyle2"
              :zIndex="99"
              :offset="{width: 35, height: 5}"
            />
            <!-- <bm-label
            :content="'站点水位：'+item.rainLastRainfall+'cm'"
            :labelStyle="labelStyle2"
            :offset="{width: 45, height: 21}"
            />-->
          </bm-marker>
        </div>
      </div>

      <!-- 故障 -->
      <div v-for="(item,index) in faultList" :key="index">
        <bm-marker
          :position="{lng:item.address[0],lat:item.address[1]}"
          :icon="{url: item.deviceType==4?'http://47.110.160.217:10071/img/jishuidian2.png':'http://47.110.160.217:10071/img/shuiwei3.png', size: {width: 160, height: 50}}"
          @mouseover="monitorDetails($event,item)"
          :zIndex="66"
          @mouseout="monitor()"
          @click="clickVideo(item)"
        >
          <bm-label
            :content="item.stationName+' '+ (item.waterLevel==null?'&nbsp&nbsp&nbsp&nbsp':item.waterLevel) +'cm'"
            :labelStyle="labelStyle3"
            :zIndex="99"
            :offset="{width: 35, height: 5}"
          />
          <!-- <bm-label
            :content="'站点水位：'+item.rainLastRainfall+'cm'"
            :labelStyle="labelStyle1"
            :offset="{width: 45, height: 21}"
          />-->
        </bm-marker>
      </div>
    </baidu-map>
  </div>
</template>

<script>
import weather from "./weather.vue";
export default {
  name: "mapp",
  components: {
    weather
  },
  data() {
    return {
      loading: false,
      throttle: true,
      type: 0,
      currentIcon: 0,
      positionX: 0,
      typeid: localStorage.getItem("id"),
      positionY: 0,
      device: { waterLeavel: 4, warningNumber: "" },
      time: 60,
      timer: null,
      types: ["BMAP_NORMAL_MAP", "BMAP_HYBRID_MAP"],
      markerTitle: {},
      region: "东营区",
      InfoAdree: [],
      url1:
        localStorage.getItem("companyId") == 4
          ? "http://47.110.160.217:10071/img/rain1.png"
          : "http://47.110.160.217:10071/img/waterLevel1.png",
      url2:
        localStorage.getItem("companyId") == 4
          ? "http://47.110.160.217:10071/img/rain2.png"
          : "http://47.110.160.217:10071/img/waterLevel2.png",
      url3:
        localStorage.getItem("companyId") == 4
          ? "http://47.110.160.217:10071/img/rain3.png"
          : "http://47.110.160.217:10071/img/waterLevel3.png",
      normalList: [], //正常
      rainList: [], //下雨
      faultList: [], //故障
      texterShow: false,
      weatherShow: false,
      // warningNumber:100,
      labelStyle1: {
        color: "#00ADF0",
        fontSize: "10px",
        backgroundColor: "transparent",
        borderRadius: "4px",
        padding: "0px 0 0px 3px",
        border: "0",
        cursor: "pointer",
        zIndex: "99999"
      },
      labelStyle2: {
        color: "#FE2238",
        fontSize: "10px",
        backgroundColor: "transparent",
        borderRadius: "4px",
        padding: "2px",
        border: "0",
        cursor: "pointer",
        zIndex: "99999"
      },
      labelStyle3: {
        color: "#999999",
        fontSize: "10px",
        backgroundColor: "transparent",
        borderRadius: "4px",
        padding: "2px",
        border: "0",
        cursor: "pointer",
        zIndex: "99999"
      },
      weatherInfo: {}, //当前天气详情
      weatherHour: {}, //每小时天气指数
      lifeIndex: {}, //当天天气建议
      weatherAlarm: {}, //当天预警信息
      recordList: [
        {
          state: "2020-06-18",
          gatename: "锦霞南区",
          rname: "积水报警",
          tel: "超限31cm"
        },
        {
          state: "2020-06-25",
          gatename: "胜凯小区",
          rname: "积水报警",
          tel: "超限20cm"
        }
        // {
        //   state: "2020-09-08",
        //   gatename: "积水点1",
        //   rname: "水位报警",
        //   tel: "超限30cm"
        // },
        // {
        //   state: "2010-09-08",
        //   gatename: "积水点1",
        //   rname: "水位报警",
        //   tel: "超限30cm"
        // },
        // {
        //   state: "2010-09-08",
        //   gatename: "积水点1",
        //   rname: "水位报警",
        //   tel: "超限30cm"
        // },
        // {
        //   state: "2010-09-08",
        //   gatename: "积水点1",
        //   rname: "水位报警",
        //   tel: "超限30cm"
        // },
        // {
        //   state: "2010-09-08",
        //   gatename: "积水点1",
        //   rname: "水位报警",
        //   tel: "超限30cm"
        // }
      ]
    };
  },
  created() {
    this.getWeather();
    // this.$http.post("rainLog/getWeather", {}).then(res => {
    //   console.log(JSON.parse(res.data));
    // });
  },
  mounted() {
    window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: 1,
        tmpColor: "FFFFFF",
        tmpSize: 16,
        cityColor: "FFFFFF",
        citySize: 16,
        aqiSize: 16,
        weatherIconSize: 24,
        alertIconSize: 18,
        padding: "10px 10px 10px 10px",
        shadow: "1",
        language: "auto",
        borderRadius: 5,
        city: "CN101121201",
        fixed: "false",
        vertical: "middle",
        horizontal: "center",
        key: "7741e5c89a144410a6aacff96944eb0d"
      }
    };
    (function(d) {
      var c = d.createElement("link");
      c.rel = "stylesheet";
      c.href =
        "https://widget.heweather.net/simple/static/css/he-simple.css?v=1.3";
      var s = d.createElement("script");
      s.src =
        "https://widget.heweather.net/simple/static/js/he-simple.js?v=1.3";
      var sn = d.getElementsByTagName("script")[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);
    this.getList();
    this.drawLine1();
    this.drawLine2();
    this.drawLine3();
    this.$nextTick(() => {
      this.postTime();
    });
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },

  methods: {
    getWaterIcons(iconId) {
      this.currentIcon = iconId;
      this.type = iconId;
      this.getList();
    },

    handler({ BMap, map }) {
      map.setMapType(BMAP_HYBRID_MAP);
    },
    getWeather() {
      var that = this;
      that.$http.post("rainLog/getWeather").then(res => {
        // console.log(res);
        that.weatherInfo = res.data.result.realTime;
        that.lifeIndex = res.data.result.today.lifeIndex;
        // ;
      });
      // that.$http.post("rainLog/getWeatherAlarm").then(res => {
      //   if (res.data.HeWeather6[0].status == "ok") {
      //     that.weatherAlarm = res.data.HeWeather6[0].alarm;
      //   } else {
      //     that.weatherAlarm = "当前地区暂无自然灾害或天气预警";
      //   }
      // });

      that.$http.post("rainLog/getWeatherHourly").then(res => {
        var list = res.data.HeWeather6[0].grid_hourly;
        var pcpn = []; //降雨量
        var time = []; //时间(小时)
        var tmp = []; //温度
        var wind_sc = []; //风级
        var wind_dir = []; //风向
        var timeString = "";
        for (var i = 0; i < list.length; i++) {
          pcpn.push(list[i].pcpn);
          timeString = list[i].time.split(" ")[1].split(":")[0];
          time.push(timeString);
          tmp.push(list[i].tmp);
          wind_sc.push(list[i].wind_sc.substr(-1, 1));
          wind_dir.push(list[i].wind_dir);
        }
        that.weatherHour.pcpn = pcpn; //降雨量
        that.weatherHour.time = time; //时间
        that.weatherHour.tmp = tmp; //温度
        that.weatherHour.wind_sc = wind_sc; //风级
        that.weatherHour.wind_dir = wind_dir; //风向
        // console.log(that.weatherHour, "2222222222222");
        that.drawLine1();
        that.drawLine2();
        that.drawLine3();
      });
    },
    drawLine1() {
      let myChart1 = this.$Echarts.init(this.$refs.ehart1);
      // 指定图表的配置项和数据
      let option = {
        // backgroundColor: '#fff',
        color: "#E33629",
        title: {
          text: "气温实况(℃)",
          left: "center",
          textStyle: {
            color: "#E33629", //颜色
            fontStyle: "normal", //风格
            fontWeight: "normal", //粗细
            fontFamily: "Microsoft yahei", //字体
            fontSize: 14 //大小
          }
        },
        grid: {
          top: 24,
          left: 10,
          right: 10,
          bottom: 10,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          backgroundColor: "rgba(36,37,41,0.8);" // tooltip的背景色
          // formatter: function(params) {
          //   return (
          //     params[0].name +
          //     params[0].seriesName +
          //     "：" +
          //     params[0].value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") +
          //     "CM"
          //   );
          // }
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#E33629", // x坐标轴的轴线颜色
              width: 1 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: this.weatherHour.time
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#E33629", // x坐标轴的轴线颜色
              width: 1 //这里是坐标轴的宽度,可以去掉
            }
          }
        },
        series: [
          {
            data: this.weatherHour.tmp,
            type: "line"
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option);
    },
    drawLine2() {
      let myChart2 = this.$Echarts.init(this.$refs.ehart2);
      // 指定图表的配置项和数据
      let option = {
        color: "#0B9227",
        title: {
          text: "降雨实况(MM)",
          left: "center",
          textStyle: {
            color: "#0B9227", //颜色
            fontStyle: "normal", //风格
            fontWeight: "normal", //粗细
            fontFamily: "Microsoft yahei", //字体
            fontSize: 14 //大小
          }
        },
        grid: {
          top: 24,
          left: 10,
          right: 10,
          bottom: 10,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          backgroundColor: "rgba(36,37,41,0.8);" // tooltip的背景色
          // formatter: function(params) {
          //   return (
          //     params[0].name +
          //     params[0].seriesName +
          //     "：" +
          //     params[0].value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") +
          //     "CM"
          //   );
          // }
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#0B9227", // x坐标轴的轴线颜色
              width: 1 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: this.weatherHour.time
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#0B9227", // x坐标轴的轴线颜色
              width: 1 //这里是坐标轴的宽度,可以去掉
            }
          }
        },
        series: [
          {
            data: this.weatherHour.pcpn,
            type: "line"
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option);
    },
    drawLine3() {
      let myChart = this.$Echarts.init(this.$refs.ehart3);
      // 指定图表的配置项和数据
      let option = {
        color: "#1765F3",
        title: {
          text: "风向风力(级)",
          left: "center",
          textStyle: {
            color: "#1765F3", //颜色
            fontStyle: "normal", //风格
            fontWeight: "normal", //粗细
            fontFamily: "Microsoft yahei", //字体
            fontSize: 14 //大小
          }
        },
        grid: {
          top: 24,
          left: 10,
          right: 10,
          bottom: 10,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          backgroundColor: "rgba(36,37,41,0.8);" // tooltip的背景色
          // formatter: function(params) {
          //   return (
          //     params[0].name +
          //     params[0].seriesName +
          //     "：" +
          //     params[0].value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") +
          //     "CM"
          //   );
          // }
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#1765F3", // x坐标轴的轴线颜色
              width: 1 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: this.weatherHour.time
          // data: this.weatherHour.wind_dir,
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#1765F3", // x坐标轴的轴线颜色
              width: 1 //这里是坐标轴的宽度,可以去掉
            }
          }
        },
        series: [
          {
            data: this.weatherHour.wind_sc,
            type: "line"
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    postTime() {
      this.time = 60;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.time <= 0) {
          this.getList();
          this.type=0;
          this.currentIcon=0;

          this.time = 61;
        }
        this.time--;
      }, 1000);
    },
    // 页面刷新
    handleSelect() {},
    //获取数据

    getList() {
      if (localStorage.getItem("id") == 1) {
        this.$http
          .post("device/indexFindAll", {
            companyId: localStorage.getItem("companyId"),
            type: this.type
          })
          .then(res => {
            this.InfoAdree = res.data;
            console.log(this.InfoAdree, "2222222");
            if (this.InfoAdree) {
              this.InfoAdree.forEach(item => {
                item.address = item.stationAddress.split(",");
              });
            }

            this.normalList = this.InfoAdree.filter(item => {
              return (
                // item.waterWarningStatus == 1 || item.powerWarningStatus == 1
                item.waterWarningStatus == 1
              );
            });

            this.rainList = this.InfoAdree.filter(item => {
              // return item.waterWarningStatus == 0;
              return item.waterWarningStatus == 0;
            });

            this.faultList = this.InfoAdree.filter(item => {
              return item.waterLevel == null;
            });
          });
      }
      if (localStorage.getItem("id") == 5) {
        this.$http
          .post("device/indexFindAll", {
            companyId: localStorage.getItem("companyId"),
            type: 1
          })
          .then(res => {
            this.InfoAdree = res.data;
            console.log(this.InfoAdree, "2222222");
            if (this.InfoAdree) {
              this.InfoAdree.forEach(item => {
                item.address = item.stationAddress.split(",");
              });
            }

            this.normalList = this.InfoAdree.filter(item => {
              return (
                item.waterWarningStatus == 1 && item.powerWarningStatus == 1
              );
            });

            this.rainList = this.InfoAdree.filter(item => {
              // return item.waterWarningStatus == 0;
              return (
                item.waterWarningStatus == 0 || item.powerWarningStatus == 0
              );
            });

            this.faultList = this.InfoAdree.filter(item => {
              return item.waterLevel == null;
            });
          });
      }
      if (localStorage.getItem("id") == 6) {
        this.$http
          .post("device/indexFindAll", {
            companyId: localStorage.getItem("companyId"),
            type: 4
          })
          .then(res => {
            this.InfoAdree = res.data;
            console.log(this.InfoAdree, "2222222");
            if (this.InfoAdree) {
              this.InfoAdree.forEach(item => {
                item.address = item.stationAddress.split(",");
              });
            }

            this.normalList = this.InfoAdree.filter(item => {
              return (
                item.waterWarningStatus == 1 && item.powerWarningStatus == 1
              );
            });

            this.rainList = this.InfoAdree.filter(item => {
              // return item.waterWarningStatus == 0;
              return (
                item.waterWarningStatus == 0 || item.powerWarningStatus == 0
              );
            });

            this.faultList = this.InfoAdree.filter(item => {
              return item.waterLevel == null;
            });
          });
      }
    },
    monitor() {
      this.texterShow = false;
      this.throttle = true;
      this.loading = false;
    },
    monitorDetails(e, item) {
      if (this.throttle) {
        this.throttle = false;
        this.texterShow = true;
        this.loading = true;
        var that = this;
        that.type = item.deviceType;
        // debugger;
        that.positionX = e.pixel.x + 80;
        that.positionY = e.pixel.y - 50;

        // if (e.clientY > 430 || e.clientX > 1200) {
        //   that.positionX = e.pixel.x / 2;
        //   that.positionY = e.pixel.y - e.clientY / 2 - 50;
        // } else {
        //   that.positionX = e.pixel.x + 50;
        //   that.positionY = e.pixel.y + 50;
        // }
        if (item.deviceType == 1) {
          this.$http
            .post("device/popFindByStationId", {
              stationId: item.stationId,
              deviceType: item.deviceType
            })
            .then(res => {
              if (res.data.length == 0) {
                return;
              }
              that.device = res.data[0];
              // that.device.waterLastOnlineTime = that.device.waterLastOnlineTime.split(" ")[0];
              // console.log(that.device);
              this.loading = false;
            });
        }

        if (item.deviceType == 4) {
          this.$http
            .get("device/findDeviceInfo", {
              params: { name: item.stationName }
            })
            .then(res => {
              if (res.data.length == 0) {
                return;
              }
              that.device = res.data[0];
              // that.device.waterLastOnlineTime = that.device.waterLastOnlineTime.split(" ")[0];
              // console.log(that.device);
              this.loading = false;
            });
        }

        // that.$http
        //   .post("rainDevice/getCriteriaQuerySolar", {
        //     name: item.name,
        //     companyId: localStorage.getItem("companyId")
        //   })
        //   .then(res => {
        //     that.device = res.data[0];
        //     that.$http
        //       .post("rainDevice/getCriteriaQuery", {
        //         name: item.name,
        //         companyId: localStorage.getItem("companyId")
        //       })
        //       .then(res => {
        //         that.device.waterLeavel = res.data[0].waterLeavel;
        //         that.device.warningNumber = res.data[0].warningNumber;

        //         console.log('444',res.data)
        //         var device = that.device;
        //         that.$http
        //           .post("rainDevice/deviceDetail", {
        //             id: device.id,
        //             companyId: localStorage.getItem("companyId")
        //           })
        //           .then(res => {
        //             device = res.data;
        //             device.waterLeavel = that.device.waterLeavel;
        //             device.warningNumber =that.device.warningNumber;
        //             device.waterUpdateTime =that.device.waterUpdateTime

        //             that.device = device;
        //             that.loading = false;
        //           });
        //       });
        //   });
      }
    },
    clickVideo(item) {
      console.log(item, "222222");
      if (item.deviceType == 4) {
        this.$router.push({ path: "/waterpoint/pointlist" });
      }
      if (item.deviceType == 1) {
        this.$http
          .post("device/findByName", {
            stationId: item.stationId
          })
          .then(res => {
            this.$router.push({
              path: res.data.url
            });
          });
      }
    },
    getWeatherInfo() {
      this.weatherShow = true;
    }
  }
};
</script>
<style lang="less" scoped>
.anniu {
  width: 248px;
  height: 99px;
  top: 0;
  right: 0;
  z-index: 1;
  position: absolute;
  margin-right: 10px;
  background: rgba(61, 133, 254, 1);
  box-shadow: 0px 0px 40px 0px rgba(49, 49, 49, 0.15);
  border-radius: 4px;
}

.ccc {
  font-size: 30px;
  color: blue;
}
.red {
  color: red;
}
.green {
  color: green;
}
.normal {
  color: #24ba14;
}
.active {
  background-color: #ff1868f0;
  color: #fff;
  font-size: 700;
}
.future .bgc {
  background: linear-gradient(
    0deg,
    rgba(164, 211, 246, 1) 0%,
    rgba(31, 138, 226, 1) 100%
  );
}

#mapp {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  user-select: none;
  .tk_btn {
    background: rgba(61, 133, 254, 1);
    box-shadow: 0px 0px 40px 0px rgba(49, 49, 49, 0.15);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1;
    font-size: 16px;
    box-shadow: 0px 0px 40px 0px rgba(49, 49, 49, 0.15);
    .tK_wendu,
    .tk_jiance {
      width: 167px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        width: 50%;
      }
    }
    .btnjiance {
      margin-left: 30px;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .show_info {
    width: 85%;
    height: 100%;
    background: rgba(222, 222, 222, 1);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    .up_to {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .up_box {
        width: 100%;
        height: 64%;
        display: flex;
        justify-content: space-around;
        .rr {
          position: relative;
          bottom: 0;
          background: url("../../assets/png/tqbg.png") center no-repeat;
          background-size: 100%;
          left: 0;
          width: 25%;
          height: 100%;

          .rr_iframe {
            position: absolute;
            top: 30px;
            left: 0;
          }
          .rr_bot {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 50%;
            .rr_bot_item {
              width: 100%;
              height: 20%;
              display: flex;
              justify-content: center;
              align-items: center;
              .feng_left {
                width: 50%;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400;
                padding-left: 30px;
              }
              .feng_right {
                width: 50%;
                line-height: 20px;
                font-size: 16px;
                text-align: left;
                font-weight: 800;
              }
            }
          }
        }

        .ll_echart {
          // display: flex;
          // justify-content: space-between;
          // align-items: center;
          // flex-direction: column;
          width: 74%;
          height: 100%;
          background-color: #e7eef9;
          .chart_content {
            width: 100%;
            height: 33.3%;
          }
        }
      }
      .down_box {
        width: 100%;
        height: 34%;
        display: flex;
        justify-content: space-around;
        .ditu {
          width: 24.5%;
          height: 100%;
          line-height: 325px;
          background-color: #fff;
          border-radius: 4px;
          font-size: 26px;
          font-weight: 600;
        }
        .shitianqi {
          width: 30%;
          height: 100%;
          background: url("../../assets/png/tqbg1.png") center no-repeat;
          background-size: cover;
          border-radius: 4px;
        }
        .yujing {
          width: 15%;
          height: 100%;

          background-color: #edf4ff;
          box-shadow: 0px 0px 40px 0px rgba(47, 47, 47, 0.15);
          border-radius: 4px;
          font-size: 20px;
          font-weight: 600;
          .yujing_info {
            font-size: 16px;
            line-height: 28px;
            font-weight: 400;
            color: rgba(20, 3, 51, 1);
            padding: 20px;
          }
          .yujing_title {
            padding-top: 40px;
            color: red;
          }
        }
        .kqzl {
          width: 22%;
          height: 100%;
          padding: 0 20px;
          position: relative;
          background: rgba(243, 247, 255, 1);
          .biaoshi1 {
            position: absolute;
            top: 60%;
            left: 10%;
            width: 2px;
            height: 40px;
            background-color: #0bc969;
            &::after {
              content: "";
              position: absolute;
              bottom: -10px;
              left: -10px;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background-color: #0bc969;
            }
          }
          .point {
            width: 50px;
            height: 40px;
            position: absolute;
            top: 60%;
          }

          .biaoshi2 {
            position: absolute;
            top: 60%;
            left: 20%;
            width: 2px;
            height: 40px;
            background-color: #ffbe07;

            &::after {
              content: "";
              position: absolute;
              bottom: -10px;
              left: -10px;

              border-radius: 50%;
              width: 20px;
              height: 20px;
              background-color: #ffbe07;
            }
          }
          .biaoshi3 {
            position: absolute;
            top: 60%;
            left: 30%;
            width: 2px;
            height: 40px;
            border-radius: 50%;
            background-color: #ff2d76;
            &::after {
              content: "";
              position: absolute;
              bottom: -10px;
              left: -10px;

              border-radius: 50%;
              width: 20px;
              height: 20px;
              background-color: #ff2d76;
            }
          }
          .biaoshi4 {
            position: absolute;
            top: 60%;
            right: 50%;
            width: 2px;
            height: 40px;
            border-radius: 50%;
            background-color: #fd6f1f;
            &::after {
              content: "";
              position: absolute;
              bottom: -10px;
              left: -10px;

              border-radius: 50%;
              width: 20px;
              height: 20px;
              background-color: #fd6f1f;
            }
          }
          .biaoshi5 {
            position: absolute;
            top: 60%;
            right: 30%;
            width: 2px;
            height: 40px;
            border-radius: 50%;
            background-color: #2e75ff;
            &::after {
              content: "";
              position: absolute;
              bottom: -10px;
              left: -10px;

              border-radius: 50%;
              width: 20px;
              height: 20px;
              background-color: #2e75ff;
            }
          }
          .biaoshi6 {
            position: absolute;
            top: 60%;
            right: 10%;
            width: 2px;
            height: 40px;
            background-color: #140333;
            &::after {
              content: "";
              position: absolute;

              bottom: -10px;
              left: -10px;
              border-radius: 50%;
              width: 20px;
              height: 20px;
              background-color: #140333;
            }
          }

          .text {
            height: 20px;
            font-size: 18px;
            font-weight: 600;
            margin-top: 40px;
            color: rgba(51, 51, 51, 1);
            line-height: 30px;
          }
          .kq_status {
            margin: 48px auto;
            display: flex;
            width: 100%;
            height: 52px;
            line-height: 52px;
            .you {
              width: 10%;
              height: 100%;
              color: #fff;
              position: relative;
              background-color: #01e305;
              span {
                color: #01e305;
              }
            }
            .liang {
              width: 10%;
              height: 100%;
              color: #fff;
              background-color: #eec50b;
              span {
                color: #eec50b;
              }
            }
            .qidu {
              width: 20%;
              height: 100%;
              color: #fff;
              background-color: #ff7f00;
              span {
                color: #ff7f00;
              }
            }
            .zhongdu {
              width: 20%;
              height: 100%;
              color: #fff;
              background-color: #fe0000;
              span {
                color: #fe0000;
              }
            }
            .zhongdu2 {
              width: 20%;
              height: 100%;
              color: #fff;
              background-color: #810081;
              span {
                color: #810081;
              }
            }
            .yanzhong {
              width: 20%;
              height: 100%;
              color: #fff;
              background-color: #7e0001;
              span {
                color: #7e0001;
              }
            }
            .you,
            .liang,
            .qidu,
            .zhongdu,
            .zhongdu2,
            .yanzhong {
              position: relative;
              span {
                position: absolute;
                display: block;
                width: 20px;
                height: 20px;
                top: -20px;
                left: 0;
                text-align: left;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
  }

  .iicon {
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 9999;
    box-shadow: 0px 0px 49px 0px rgba(45, 45, 45, 0.16);
  }
}
#all_map {
  width: 100%;
  height: 100%;
}
.texter {
  position: absolute;
  width: 448px;
  height: 300px;

  background: rgba(243, 247, 255, 1);
  z-index: 999;
  border-radius: 4px;
  .cezhan {
    position: absolute;
    width: 224px;
    top: 0;
    left: 0;
    background: rgba(243, 247, 255, 1);
    z-index: 999;
    border-radius: 4px;
    .itemul {
      // padding: 10px 15PX 0 15px;

      .title {
        height: 38px;
        line-height: 35px;
        margin-left: 10px;
        text-align: left;
        i {
          font-style: normal;
          font-size: 16px;
        }
        .title_name {
          font-weight: 800;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          display: inline-block;
          font-weight: 700;
          text-align: right;
        }
      }
    }
  }
  .texterTop {
    position: absolute;
    width: 224px;
    top: 0;
    right: 0;

    .title {
      height: 38px;
      line-height: 35px;
      // padding: 0 10px 0 10px;
      text-align: left;
      i {
        font-style: normal;
        font-size: 16px;
      }
      .title_name {
        font-weight: 800;
      }
      span {
        display: inline-block;
        font-weight: 700;
        text-align: left;
        margin-left: 10px;
      }
    }
  }
  .TR {
    position: absolute;

    top: 0;
    right: 0;
    width: 164px;
    height: 164px;
    background: linear-gradient(
      0deg,
      rgba(244, 248, 255, 1) 0%,
      rgba(165, 196, 249, 1) 100%
    );
    opacity: 0.5;
    border-radius: 50% 0 0 50%;
  }
  .LB {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 82px;
    height: 82px;
    opacity: 0.5;
    background: linear-gradient(
      0deg,
      rgba(199, 218, 252, 1) 0%,
      rgba(244, 247, 253, 1) 100%
    );
    opacity: 0.5;
    border-radius: 0 50% 50% 0;
  }
  // .line {
  //   position: absolute;
  //   top: 50%;
  //   left: 50%;
  //   width: 2px;
  //   height: 80%;
  //   opacity: 0.8;
  //   margin-top: -50%;
  //   background: #000;
  // }
}

.el-menu-item {
  height: 36px;
  line-height: 36px;
  padding: 0 15px;
}

.closeIcon {
  float: right;
  margin-top: 10px;
  cursor: pointer;
}
.status {
  position: absolute;
  z-index: 1;
  left: 90px;
  bottom: 15px;
  width: 108px;
  // height: 128px;
  background: rgba(243, 247, 255, 1);
  box-shadow: 0px 0px 21px 0px rgba(45, 45, 45, 0.15);
  border-radius: 8px;
  padding: 10px;
  .topText {
    height: 44px;
    line-height: 44px;
    font-family: Source Han Sans CN;
    font-weight: bold;
  }
  .listone,
  .listtown,
  .listthree {
    height: 24px;
    line-height: 24px;
    display: flex;
    font-size: 16px;
    justify-content: space-around;
    justify-items: center;
    color: rgba(51, 51, 51, 1);
  }
  .blue,
  .violet,
  .red {
    display: block;
    width: 30px;
    height: 4px;
    margin-top: 8px;
  }
  .blue {
    background-color: #00adf0;
  }
  .violet {
    background-color: #fe2238;
  }
  .red {
    background-color: #999999;
  }
}
// 切换的样式
.tabs_check {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 50px;
  width: 210px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 13px 0px rgba(102, 102, 102, 0.13);
  border-radius: 16px;
  .tabs_box {
    display: flex;
    text-align: center;
    line-height: 32px;
    .items_tab {
      width: 70px;
      // height: 100%;
      cursor: pointer;
    }
  }
}
.active_current {
  width: 70px;
  height: 32px;
  background: rgba(78, 114, 200, 1);
  border-radius: 16px;
  color: #fff;
}
// 报警记录
.bottomright-B {
  position: absolute;
  z-index: 1;
  right: 0px;
  bottom: 45px;
  width: 388px;
  // height:213px;
  background: rgba(243, 247, 255, 1);
  box-shadow: 0px 0px 21px 0px rgba(45, 45, 45, 0.15);
  border-radius: 8px;

  padding: 10px;
  .gaojin_title {
    width: 82px;
    height: 18px;
    font-size: 18px;
    padding: 10px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
  .gaojin_content {
    width: 388px;
    height: 178px;
    overflow-y: auto;
    // background-color: #01e305;
  }
  .bottomright-B-main {
    height: 35px;
    line-height: 35px;
    padding: 0 8px;
    .B-main {
      float: left;
      width: 18%;
      margin: 0 2px;
      font-size: 12px;
    }
    .B-main1 {
      font-size: 12px;
      font-weight: 400;
      width: 35%;
    }
  }
  .bottomright-B-main:nth-child(2n) {
    background: #fdfaeb;
  }
}

.weather_btn {
  cursor: pointer;
  position: absolute;
  z-index: 99999;
  left: 0;
  text-align: center;
  top: 0;
  font-size: 18px;
  width: 248px;
  height: 99px;
  background: rgba(61, 133, 254, 1);
  box-shadow: 0px 0px 21px 0px rgba(45, 45, 45, 0.15);
  border-radius: 8px;

  .btnjiance {
    color: #fff;
    text-align: left;
  }
}
.timeOver {
  z-index: 9999;
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 16px;
  height: 32px;
  line-height: 32px;
}
.tankuang {
  width: 80%;
  height: 100%;
  z-index: 1;
  background-color: #ccc;
  position: absolute;
}
.ll {
  background-color: #fafffa;
}
.map {
  width: 100%;
  height: 100%;
}
</style>
